import React from 'react';
import { List, InputItem, Button, Flex, WhiteSpace, Toast } from 'antd-mobile';
import { createForm, Validation } from 'rc-form';

import '../css/common.css';
import '../css/register.css';

class applyReg extends React.Component {
  constructor(props){
    super(props);
  }
  // get code
  idencode=()=>{
  	let formData = new FormData();
    let phone = this.props.form.getFieldValue('phone');
    phone = phone.replace(/\s+/g, "");
  	formData.append("phone",phone);
  	fetch('http://58.220.10.23:8001/api/sms/sendCheckCodeWhenRegister', {
  	  method: 'POST',
      credentials: 'include',
  	  body: formData,
  	})
  }

  regBorrow=()=>{

    this.props.form.validateFields((error, value) => {
      if( error ){
        Toast.info('请填写完整的信息 !!!', 2);
        return;
      }else{
        if( value.password!==value.password2 ){
          Toast.info('两次输入的密码不一致！',2);
          console.log(error, value);
          return;
        }else{
          // submit
          value.phone = value.phone.replace(/\s+/g, "");
          let formData = new FormData();
          formData.append("phone",value.phone);
          formData.append("smscode",value.smscode);
          formData.append("password",value.password);
          formData.append("account",value.phone);
          formData.append("email","test@qq.com");
          fetch('http://58.220.10.23:8001/api/user/register/borrow', {
        	  method: 'POST', credentials: 'include', body: formData,
      	   }).then(response => response.json())
      	   .then(data=>{
              if( data.status==0 ){
                Toast.success('恭喜您，注册成功！', 2);
                this.props.history.push('applyLogin');
              }else{
                Toast.fail(data.errorMsg, 2);
              }
      	   })
        }
      }
    });
  }

  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div>
        <List>
          <Flex>
            <span className="title">借款人注册</span>
          </Flex>
          <Flex>
            <Flex.Item className="phoneForIden">
              <InputItem
                {...getFieldProps('phone',{
                  rules: [{required: true}]
                })}
                type="phone"
                placeholder="请输入手机号"
                clear
                moneyKeyboardAlign="left"
              ></InputItem>
            </Flex.Item>
            <Flex.Item className="idenBtn">
              <Button type="ghost" size="small" onClick={this.idencode}>获取验证码</Button>
            </Flex.Item>
          </Flex>

          <InputItem
            {...getFieldProps('smscode',{ rules: [{required:true}] })}
            placeholder="请输入验证码"
            clear
          ></InputItem>
          <InputItem
            {...getFieldProps('password',{
              rules: [{required:true}],
            })}
            type="password"
            placeholder="请输入密码"
            clear
          ></InputItem>
          <InputItem
            {...getFieldProps('password2',{ rules:[{required: true}] })}
            type="password"
            placeholder="请再次输入密码"
            clear
          ></InputItem>
          <List.Item>
            <Button type="primary" onClick={this.regBorrow}>确定</Button>
          </List.Item>
        </List>
      </div>
    );
  }
}

const _applyReg = createForm()(applyReg);
export default _applyReg;
